<template>
<el-container>
  <el-header style="height: auto;">
    <el-form :rules="formRules" :model="form">
      <el-row>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">
          <el-form-item label="客户标识" label-width="80px" prop="name">
            <el-input size="small" v-model="form.name" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">
          <el-form-item label="联系电话" label-width="80px" prop="phone">
            <el-input size="small" v-model="form.phone" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">
          <el-form-item label="联系地址" label-width="80px" prop="address">
            <el-input size="small" v-model="form.address" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xl="{ span: 6 }" :lg="{ span: 6 }" :md="{ span: 11 }" :sm="{ span: 12 }">
          <el-form-item label="联系人" label-width="80px" prop="contacts">
            <el-input size="small" v-model="form.contacts" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="{ span: 6 }">
          <el-form-item label-width="100px" prop="recentllyAdd">
            <el-button size="small" type="primary" :loading="searchLoading" @click="currentPage = 0 ; searchHandle()">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-main style="height: auto;">
      <el-table v-has="'ordinaryUserTable'" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column prop="name" label="客户标识" align="center"></el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
        <el-table-column prop="address" label="联系地址" align="center"></el-table-column>
        <el-table-column prop="contacts" label="联系人" align="center"></el-table-column>
        <el-table-column prop="contacts" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="deleteRow(scope.row)" size="small" v-has="'deleteOrdinaryUser'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-header>
</el-container>
</template>

<script>
import { ordinaryUsersList, ordinaryUsersDelete } from '@/api/getData'

function evil(fn) {
  const Fn = Function // 一个变量指向Function，防止有些前端编译工具报错
  return new Fn('return ' + fn)()
}

export default {
  name: 'OrdinaryUsers',
  data() {
    const validateName = (rule, value, callback) => {
      if (value.length > 60) {
        callback(new Error('用户标识不能超过60位'))
      } else {
        callback()
      }
    }
    const validateAddress = (rule, value, callback) => {
      if (value.length > 60) {
        callback(new Error('联系地址不能超过60位'))
      } else {
        callback()
      }
    }
    const validateContacts = (rule, value, callback) => {
      if (value.length > 20) {
        callback(new Error('联系人不能超过20位'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        phone: '',
        address: '',
        contacts: '',
      },
      pageSize: 10,
      currentPage: 1,
      ascs: [],
      descs: [],
      maxPage: 1,
      tableData: [],
      searchLoading: false,
      formRules: {
        name: [{ trigger: 'blur', validator: validateName }],
        phone: [
          { pattern: /^\d{1,18}$/, message: '联系电话必须是数字且不能超过18位', trigger: 'blur' }
        ],
        address: [{ trigger: 'blur', validator: validateAddress }],
        contacts: [{ trigger: 'blur', validator: validateContacts }]
      }
    }

  },
  created() {
    this.initData()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`)
      this.currentPage = val
      this.initData()
    },
    searchHandle() {
      this.initData('searchLoading')
    },
    async initData(theKey) {
      const returnData = await ordinaryUsersList({
        name: this.form.name,
        phone: this.form.phone,
        address: this.form.address,
        contacts: this.form.contacts,
        page: {
          current: this.currentPage + '',
          size: this.pageSize + '',
          ascs: this.ascs,
          descs: this.descs
        }
      }, {
        obj: this,
        key: 'tableLoading;' + theKey
      })
      this.tableData = []
      //console.log(returnData)
      if (returnData._result) {
        evil('this.' + theKey + '=false')
        this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
        // 数据回显
        returnData.data.records.map(item => {
          const obj = {}
          obj.name = item.name
          obj.phone = item.phone
          obj.address = item.address
          obj.contacts = item.contacts
          obj.id = item.id
          this.tableData.push(obj)
        })
        this.tableLoading = false
        this.searchLoading = false
      }
    },
    addOrdinaryUser() {

    },
    deleteRow(obj) {
      //console.log()
      this.$confirm('确认删除？').then(async _ => {
        const a = await ordinaryUsersDelete({ 'id': obj.id })
        if (a._result) {
          this.$message.success('操作成功')
          this.initData()
        }
      })
        .catch(_ => {
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .el-container {
    .el-header {
      margin-top: 3vh;
    }
    .el-main {
      .block {
        float: right;
      }
      .el-dropdown-link {
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  li {
    list-style: none;
    float: left;
    border: 1px solid #ccc;
    margin-right: 5px;
    line-height: 15px;
  }
</style>
